<template>
  <div class="addres-editing">
      <!-- 发票 地址 新旧编辑 添加 -->
    <div class="deposit-content">
        <div class="top-bg">
            <van-nav-bar class="header" fixed :border="false" @click-left="diffBack" @click-right="submitBtn">
                <div class="left"
                    slot="left">
                    <van-icon name="arrow-left"
                            size="24px"
                            color="#fff" />
                </div>
                <div class="title"
                    slot="title">{{title}}</div>
                <div class="right-title"
                    slot="right">{{btnMsg}}</div>
            </van-nav-bar>
        </div>
        <div  class="reset-wrapper">
            <div class="loginWrap">
                <div class="loginForm">
                    <div class="loginPhone bgwrite">
                          <input :placeholder="nameP"
                                  class="phoneInput"
                                  v-model="name"
                                   maxlength="100"
                                   ref="inputName"
                                   @click="focusName"/>
                        <img v-if="name" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="nameClear('name')">
                    </div>
                    <div class="loginPhone bgwrite">
                          <input :placeholder="phoneP"
                                  class="phoneInput"
                                  v-model="phone"
                                   ref="inputPhone"
                                   @click="focusPhone"/>
                        <img v-if="phone" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="nameClear('phone')">
                    </div>
                    <div class="loginPhone bgwrite">
                          <div class="left-key">地址选择</div>
                          <input :placeholder="areaP"
                                  class="phoneInputD"
                                  v-model="area"
                                  readonly
                                  @click="editArea"
                                  />
                          <van-popup v-model="showPopY" position="bottom" :overlay="true">  
                              <div class="address-popup" style="">
                                <div class="title-case fz4 flex">
                                  <div style="width: 20%;" @click="cancelArea">取消</div>
                                  <div style="width: 60%;text-align: center;">选择地址</div>
                                  <div style="width: 20%; text-align: right;" @click="confirmArea">确定</div>
                                </div>
                                <div class="address-select fz4 flex">
                                  <div class="select-list">
                                    <!-- <div class="select-value"
                                      
                                        @click="showProv=true">{{prov}}</div> -->
                                    <ul>
                                      <li v-for="option in proArr"
                                          :class="{'choose':provinceUid==option.provinceUid}"
                                          @click="chooseProv(option.provinceUid,option.provinceName)"
                                          :key="option.provinceUid">{{option.provinceName}}</li>
                                    </ul>
                                  </div>
                                  <div class="select-list">
                                    <!-- <div class="select-value">{{city}}</div> -->
                                    <ul>
                                      <li v-for="option in cityArr"
                                          :class="{'choose':cityUid==option.cityUid}"
                                          @click="chooseCity(option.cityUid,option.cityName)"
                                          :key="option.cityUid">{{option.cityName}}</li>
                                    </ul>
                                  </div>
                                  <div class="select-list">
                                    <!-- <div class="select-value">{{district}}</div> -->
                                    <ul>
                                      <li v-for="option in districtArr"
                                          :class="{'choose':areaUid==option.areaUid}"
                                          @click="chooseArea(option.areaUid,option.areaName)"
                                          :key="option.areaUid">{{option.areaName}}</li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                          </van-popup>
                    </div>
                    <div class="loginPhoneT bgwrite">
                          <textarea :placeholder="detailsAddressP"
                                  class="phoneInputT"
                                  v-model="detailsAddress"
                                  maxlength="100"
                                   ref="inputDetails"
                                   @click="focusDetails"/>
                        <img v-if="detailsAddress" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="nameClear('detailsAddress')">
                    </div>
                </div>
                <div>
                    <div class="btn1-case" v-if="!isDel && tages == 'oldInvoice'" @click="delAddress">删除</div>
                    <div class="btn2-case" v-if="isDel && tages == 'oldInvoice'">删除</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import {
  removeRole,
  removeToken,
  removeuserUid,
  getRole
} from "@/utils/auth.js";
import {getuserUid} from '@/utils/auth.js'
import { mapMutations, mapState} from "vuex";
import { noEmoji } from "@/utils/noEmoji";
export default {
  data() {
    return {
      title: "",
      submitB: true,
      name: "",
      nameP: "",
      phone: "",
      phoneP: "",
      area: "",
      areaP: "请选择省市区",
      province: "",
      detailsAddress: "",
      detailsAddressP: "",
      provinceName: "",
      provinceUid: "",
      cityName: "",
      cityUid: "",
      areaName: "",
      areaUid: "",
      proArr: [],
      cityArr: [],
      districtArr: [],
      btnMsg: "",
      tages: "",
      txtnum: 25,
      showPopY: false,
      phoneRegular: /^1[0-9]\d{9}$/,
      emoji: false,
      isDel: false,
      // 是否从地址列表过来的
      isAddress: false,
    };
  },
  computed: {
    ...mapState({
        editAddrerss: state=>state.editAddrerss
    })
  },
  created() {
      const self = this
      self.tages  = self.$route.params.fromInvoice
      this.isAddress = Boolean(this.$route.params ? this.$route.params.fromInvoice : false)
      if (self.tages == "newInvoice"){
          self.title = "添加地址"
          self.btnMsg = "添加"
          self.nameP = "请输入联系人名称"
          self.phoneP = "请输入联系方式"
          self.areaP = "请选择省市区"
          self.detailsAddressP = "请输入地址详细地址"
      } else if (self.tages == "oldInvoice"){
          self.selectProvincesForPlace()
          self.title = "编辑地址"
          self.btnMsg = "确定"
          self.name = self.editAddrerss.userName
          self.phone = self.editAddrerss.phone
          self.provinceUid = self.editAddrerss.provinceUid
          self.cityUid = self.editAddrerss.cityUid
          self.areaUid = self.editAddrerss.areaUid
          self.detailsAddress = self.editAddrerss.addressInfo
      }
      self.selectProvinces();
  },
  watch:{},
  methods: {
    // 聚焦姓名
    focusName() {
      this.$refs.inputName.focus()
    },
    // 聚焦手机
    focusPhone() {
      this.$refs.inputPhone.focus()
    },
    // 聚焦姓名
    focusDetails() {
      this.$refs.inputDetails.focus()
    },
    // 输入框按钮
    nameClear(val) {
      if (val == "name") {
        this.name = ""
      } else if (val == "phone") {
        this.phone = ""
      } else if (val == "detailsAddress") {
        this.detailsAddress = ""
      }
        
    },
    diffBack () {
      if(this.isAddress){
        this.$router.go(-1)
        return
      }
      this.$router.push('/designer/addressList')
    },
    submitEdit() {
        const self = this
    },
    // 编辑区域
    editArea() {
        this.showPopY = true 
    },
    // 删除编辑区域
    cancelArea() {
        this.showPopY = false 
    },
    // 获取地址省 展示用途
    async selectProvincesForPlace() {
      const SPC = await HTTP("selectProvinces", {});
      if (SPC.code == 200) {
        this.proArr = SPC.data;
        this.proArr.forEach((item)=>{
            if(item.provinceUid == this.provinceUid) {
              this.provinceName =  item.provinceName
            }
        })
        this.selectCitysP(this.provinceUid)
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址市 展示用途
    async selectCitysP(provinceUid) {
      const SPC = await HTTP("selectCitys", {
        provinceUid
      });
      if (SPC.code == 200) {
        this.cityArr = SPC.data;
        this.cityArr.forEach((item)=>{
            if(item.cityUid == this.cityUid) {
              this.cityName =  item.cityName
            }
        })
        this.selectAreaP(this.cityUid);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址区 展示用途
    async selectAreaP(cityUid) {
      const SPC = await HTTP("selectArea", {
        cityUid: cityUid
      });
      if (SPC.code == 200) {
        this.districtArr = SPC.data;
        this.districtArr.forEach((item)=>{
            if(item.areaUid == this.areaUid) {
              this.areaName =  item.areaName
            }
        })
        this.area = this.provinceName + this.cityName + this.areaName
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址省
    async selectProvinces() {
      const SPC = await HTTP("selectProvinces", {});
      if (SPC.code == 200) {
        this.proArr = SPC.data;
        if (this.tages == "newInvoice") {
          this.provinceName = this.proArr[0].provinceName;
          this.provinceUid = this.proArr[0].provinceUid;
        } else if (this.tages == "oldInvoice") {
          this.provinceName
          this.provinceUid
        }
        this.selectCitys(this.provinceUid);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址市
    async selectCitys(provinceUid) {
      const SPC = await HTTP("selectCitys", {
        provinceUid
      });
      if (SPC.code == 200) {
        this.cityArr = SPC.data;
        if (this.tages == "newInvoice") {
          this.cityName = this.cityArr[0].cityName;
          this.cityUid = this.cityArr[0].cityUid;
        } else if (this.tages == "oldInvoice") {
          this.cityName
          this.cityUid
        }
        this.selectArea(this.cityUid);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 获取地址区
    async selectArea(cityUid) {
      const SPC = await HTTP("selectArea", {
        cityUid: cityUid
      });
      if (SPC.code == 200) {
        this.districtArr = SPC.data;
        if (this.tages == "newInvoice") {
          this.areaName = this.districtArr[0].areaName;
          this.areaUid = this.districtArr[0].areaUid;
        } else if (this.tages == "oldInvoice") {
          this.areaName
          this.areaUid
        }
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    chooseProv(provinceUid, provinceName) {
      // this.showProv=false
      this.provinceUid = provinceUid;
      this.provinceName = provinceName;
      this.selectCitys(provinceUid);
    },
    chooseCity(cityUid, cityName) {
      this.cityUid = cityUid;
      this.cityName = cityName;
      this.selectArea(cityUid);
    },
    chooseArea(areaUid, areaName) {
      this.areaUid = areaUid;
      this.areaName = areaName;
    },
    // 添加地址
    async addAddress() {
      const SPC = await HTTP("app/userAddress/addAddress", {
        userUid: getuserUid(),
        addressType: 1,
        userName: this.name,
        phone: this.phone,
        address: this.detailsAddress,
        addressInfo: this.detailsAddress,
        cityUid: this.cityUid,
        provinceUid: this.provinceUid,
        longitude: "",
        latitude: "",
        areaUid: this.areaUid,
        createBy: getuserUid()
      });
      if (SPC.code == 200) {
        this.diffBack()
        this.$toast(this.tages == "newInvoice"?"添加成功":this.tages == "oldInvoice"?"修改成功":"")
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 删除地址
    async removeAddress() {
      const SPC = await HTTP("removeAddress", {
        uid: this.editAddrerss.uid
      });
      if (SPC.code == 200) {
        this.$toast('删除成功')
        this.setEditAddrerss()
        this.diffBack()
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 添加地址
    async updateAddress() {
      const SPC = await HTTP("app/userAddress/updateAddress", {
        uid: this.editAddrerss.uid,
        userUid: getuserUid(),
        addressType: 1,
        userName: this.name,
        phone: this.phone,
        address: this.detailsAddress,
        addressInfo: this.detailsAddress,
        cityUid: this.cityUid,
        provinceUid: this.provinceUid,
        longitude: "",
        latitude: "",
        areaUid: this.areaUid,
        updateBy: getuserUid()
      });
      if (SPC.code == 200) {
        this.diffBack()
        this.$toast("修改成功")
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    // 确认编辑区域
    confirmArea() {
      this.area = this.provinceName + this.cityName + this.areaName
      this.showPopY = false
    },
    // 取消编辑区域
    cancelArea() {
      this.showPopY = false
    },
    // 添加 、编辑
    submitBtn() {
      if (this.name == "") {
        this.nameP = "联系人无法为空"
        this.$toast('联系人无法为空')
        return false;
      } else if (this.name !== "") {
        for (let i of this.name) {
          if (noEmoji(i)) {
            this.emoji = true;
            break;
          } 
        }
        if (this.emoji) {
          this.emoji=false
          this.name = ""
          this.$toast('内容只限数字，中文，英文哦~~')
          return false
        } else {
          if (this.phone == "") {
            this.phoneP = "联系方式无法为空"
            this.$toast('联系方式无法为空')
            return false;
          } else if (this.phone !== ""){
                for (let i of this.phone) {
                    if (noEmoji(i)) {
                      this.emoji = true;
                      break;
                    } 
                }
                if (this.emoji) {
                  this.emoji=false
                  this.phone = ""
                  this.$toast('内容只限数字，中文，英文哦~~')
                  return false
                } else {
                  if (!this.phoneRegular.test(this.phone)) {
                    this.phoneP = "请输入正确的手机号码"
                    this.phone = ""
                    this.$toast('请输入正确的手机号码')
                    return false
                  } else if (this.area == "") {
                    this.areaP = "省市区无法为空"
                    this.$toast('省市区无法为空')
                    return false
                  } else if (this.detailsAddress == "") {
                      this.detailsAddressP = "详细地址无法为空"
                      this.$toast('详细地址无法为空')
                      return false
                    } else if (this.detailsAddress !== "") {
                      for (let i of this.detailsAddress) {
                          if (noEmoji(i)) {
                            this.emoji = true;
                            break;
                          } 
                      }
                      if (this.emoji) {
                        this.emoji=false
                        this.detailsAddress = ""
                        this.$toast('内容只限数字，中文，英文哦~~')
                        return false
                      } else {
                    }
              }
            }
          }
      // 调取接口 + 清楚状态管理数据 this.setEditAddrerss(null) + 跳转 this.$router.push('/designer/addressList')
        }
      }
      if (this.tages == "newInvoice") {
        this.addAddress()
      } else{
        this.updateAddress()
      } 
    },
    // 删除按钮
    delAddress() {
      this.isDel = true
      this.removeAddress()
    },
    ...mapMutations(['setEditAddrerss'])
  }
};
</script>
<style lang="scss" scoped>
.addres-editing {
  .top-bg{
        width: 100%;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        .header {
            background: #5E8EFE;
            color: #ffffff!important;
            height: 0.92rem;
            .title {
                color: #ffffff;
                font-size: 0.35rem;
                }
            .right-title{
                color: #ffffff;
                font-size: 0.32rem;
            }
        }
    }
  .reset-wrapper{
      position: fixed;
      width: 100%;
      padding: 0.24rem;
      box-sizing: border-box;
      top: 0.92rem;
      left: 0;
      right: 0;
      overflow-y: scroll;
      bottom: 0; 
  .loginWrap {
    width: 90%;
    margin: 0 auto;
    .btn1-case{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        height: 0.88rem;
        width: 100%;
        background: #FF5959;
        line-height: 0.88rem;
        text-align: center;
        color: #fff;
        margin-top: 0.7rem;
        border-radius: 0.1rem;
    }
    .btn2-case{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        height: 0.88rem;
        width: 100%;
        background: #DFE8FF;
        line-height: 0.88rem;
        text-align: center;
        color: #fff;
        margin-top: 0.7rem;
        border-radius: 0.1rem;
    }
    .LoginFont {
      width: 100%;
      font-size: 0.26rem;
      font-weight: 500;
      margin-top: 0.4rem;
    }
    .loginForm {
      position: relative;
      width: 100%;
      margin-top: 0.3rem;
      .loginPhone {
        position: relative;
        width: 100%;
        height: 1rem;;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.7rem 0 0.24rem;
        margin-bottom: 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 5rem;
          border: 0;
          font-size: 0.3rem;
          color: #282828;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          &::-webkit-input-placeholder{
            color: #CCCCCC;
          }
        }
        .phoneInputD{
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 5rem;
          text-align: right;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
          color: #282828;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          word-wrap: normal;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          &::-webkit-input-placeholder{
            color: #CCCCCC;
          }
        }
        .left-key{
          width: 3rem;
          font-size: 0.3rem;
          color: #656565;
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
        .pwd-right{
          position: absolute;
          width: 0.3rem;
          right: 0.24rem;
          top: 0px;
          bottom: 0px;
          margin: auto;
        }
        .title-case {
          padding: 0 0.24rem;
          height: 1rem;
          line-height: 1rem;
          justify-content: space-between;
        }
        .address-popup {
          .address-select {
            height: 8rem;
            overflow: hidden;
            .select-list {
              height: 8rem;
              overflow: scroll;
              width: calc(100% / 3);
              text-align: center;
              ul {
                li {
                  line-height: 0.46rem;
                }
                .choose {
                  color: $color-primary;
                }
              }
            }
          }
        }
      }
      .loginPhoneT {
        position: relative;
        width: 100%;
        height: 3rem;;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0.24rem;
        margin-bottom: 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInputT{
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 90%;
          height: 2.52rem;
          text-align: left;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
          color: #282828;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          &::-webkit-input-placeholder{
            color: #CCCCCC;
          }
        }
        .left-key{
          width: 3rem;
          font-size: 0.3rem;
          color: #656565;
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
        .pwd-right{
          position: absolute;
          width: 0.3rem;
          right: 0.24rem;
        }
      }
      // 密码
      .loginPassword {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 130%;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
      }
      .contract-forget{
        position: relative;
        width: 100%;
        margin-top: 0.5rem;
        div{
          display: inline-block;
        }
        .contract-left{
          .contract-word{
            display: inline-block;
            color: #5E8EFE;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
        .forget-right{
          position: absolute;
          top: 0;
          right: 0;
          height: 0.2rem;
          text-align: right;
          input{
            background: transparent;
            border: 0;
            color: #959595;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 0.28rem;
          }
        }
      }
      .loginPhoCode {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0.2rem;

        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.6rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius:0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          width: 1rem;
          height: 0.4rem;
          background-color: #a4a09c;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
        }
      }

      .loginBtn {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.9rem;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #5E8EFE;
      }
      .go-register{
        margin-top: 0.5rem;
        width: 100%;
        height: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #656565;
      }
      .temp-btns{
        margin-top: 0.5rem;
        button{
          width: 40%;
          margin: 0 30%;
        }
      }
    }
  }
  }
  .cell {
    height: 1rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #3f3e3e;
    font-size: 0.3rem;
  }
}
</style>
